<template>
    <div>
        <div style="margin-top: 80px;
                    width: 100%;
                    text-align: center;
                    line-height: 50px">
          <h1>对话框(Dialog)</h1>
          <h2>提供三种大小支持</h2>
          <h2>size：tiny（普通对话框） / small（带有表单的，默认） / large（超宽的）</h2>
          <at-button type="primary" @click="changeDialogVisibleOne">普通对话框</at-button>
          <at-button type="primary" @click="changeDialogVisibleTwo">带有表单的</at-button>
          <at-button type="primary" @click="changeDialogVisibleThree">超宽的</at-button>
        </div>

        <at-dialog title="弹出框名称" :visible.sync="dialogVisibleOne" >
          <span>建立全网追溯任务,追溯的结果可前往“我的任务”页面查看</span>
          <div slot="footer" class="dialog-footer">
              <at-button type="primary" @click="changeDialogVisibleOne">确 定</at-button>
              <at-button @click="changeDialogVisibleOne">取 消</at-button>
          </div>
        </at-dialog>

        <at-dialog title="弹出框名称" :visible.sync="dialogVisibleTwo">
          <at-form ref="form" :model="form" :rules="rules" label-width="80px">
            <at-form-item label="账号" prop="ATUser">  
                <at-input v-model="form.ATUser"></at-input>
            </at-form-item>
            <at-form-item label="密码" prop="ATPwd">
                <at-input v-model="form.ATPwd"></at-input>
            </at-form-item>
            <at-form-item label="邮箱" prop="ATEmail">
                <at-input v-model="form.ATEmail"></at-input>
            </at-form-item>
            <at-form-item> <!--padding-left:45px;width:90%-->
              <at-button type="primary" @click="submitForm('form')">立即创建</at-button>
              <at-button @click="resetForm('form')">重置</at-button>
            </at-form-item>
          </at-form>
        </at-dialog>

        <at-dialog title="弹出框名称" :visible.sync="dialogVisibleThree" size="large">
          <span>建立全网追溯任务,追溯的结果可前往“我的任务”页面查看</span>
          <div slot="footer" class="dialog-footer">
              <at-button @click="changeDialogVisibleThree">关 闭</at-button>
          </div>
        </at-dialog>
    </div>
</template>

<script>
  export default {
    data() {
      return{
        dialogVisibleOne: false,
        dialogVisibleTwo: false,
        dialogVisibleThree: false,
				form: {
		          ATUser:'',
		          ATPwd:'',
		          ATEmail:'',
        },
        rules: {
		      ATUser:[
		        { trigger: 'blur', required:true, message: '用户名为必填,请输入用户名'}
		      ],
          ATPwd:[
            { trigger: 'blur', required:true, message: '密码为必填,请输入密码'}
          ],
		      ATEmail:[
		        { trigger: 'blur', required:true, message: '邮箱为必填,请输入邮箱'}
		      ],
		    }
      }
    },
    methods: {
      handleClose() {
        console.log("before-close");
      },
      changeDialogVisibleOne(){
        if(this.dialogVisibleOne){
          this.dialogVisibleOne = false;
        }else{
          this.dialogVisibleOne = true;
        }
      },
      changeDialogVisibleTwo(){
        if(this.dialogVisibleTwo){
          this.dialogVisibleTwo = false;
        }else{
          this.dialogVisibleTwo = true;
        }
      },
      changeDialogVisibleThree(){
        if(this.dialogVisibleThree){
          this.dialogVisibleThree = false;
        }else{
          this.dialogVisibleThree = true;
        }
      },
	    submitForm(formName) {
	       this.$refs[formName].validate((valid) => {
	         if (valid) {
	           alert('submit!');
	         } else {
	           console.log('error submit!!');
	           return false;
	         }
	       });
	     },
	    resetForm(formName) {
	      this.$refs[formName].resetFields();
	    }
    }
  };
</script>
<style>
</style>
